<template>
    <div class="box_alarm">
        <MoodalTitle :title="'高发道路、类型的对比分析'">
            <TimeTab @timeReturnFn="timeReturnFn" :timeList="timeList" />
        </MoodalTitle>
        <!-- 标题 -->
        <div class="flex">
            <div :class="type == 0 ? 'box_dl' : 'box_dl border'" @click="activeIndex(0)">道路</div>
            <div :class="type == 1 ? 'box_dl ' : 'box_dl border'" @click="activeIndex(1)">类型</div>
        </div>
        <!-- 统计图 -->
        <div id="chart" class="box_chart">
        </div>
    </div>
</template>
<script>
import { ZongHeZhztaDB } from '@/api/zhangzi/index'
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import TimeTab from '@/components/TimeTab/Index.vue'
export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            timeList: [
                {
                    title: '周',
                    value: 0,
                },
                {
                    title: '月',
                    value: 1,
                },
                {
                    title: '年',
                    value: 2,
                },
            ],
            roadList: [],
            roadAta: [],
            dateType: 0,
            type: 0
        }
    },
    mounted() {
        this.roadAnalyze()
    },
    methods: {
        activeIndex(type) {
            if (type == 0) {
                this.type = type
            }
            if (type == 1) {
                this.type = type
            }
            this.roadList = []
            this.roadAta = []
            this.roadAnalyze()
        },
        timeReturnFn(val) {
            this.dateType = val.value
            this.roadList = []
            this.roadAta = []
            this.roadAnalyze()
        },
        functionEchart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#chart'));

            let option = {
                title: {
                    // text: '数量',
                    // color: '#ffffff',
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    data: this.roadAta
                },
                yAxis: {
                    name: '数量',
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },

                    splitLine: { // ‘三’形分隔线
                        show: true,
                        lineStyle: {
                            color: '#22376d'
                        },
                    }

                },

                series: [{
                    type: 'bar',
                    data: this.roadList,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            y: 1, // 若将此值设为1，表示从上到下渐变
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#00A2E2' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#00D6DE' // 90% 处的颜色
                                }
                            ]
                        }
                    },
                    barWidth: 32,
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 高发道路、类型分析
        roadAnalyze() {
            let page = {
                dateType:this.dateType,
                type:this.type
            }
            ZongHeZhztaDB.getHighRoad(page).then(res => {
                console.log(res, '高发道路、类型分析');
                if (res.code == 200) {
                    res.data.forEach(item => {
                        this.roadAta.push(item.name)
                        this.roadList.push(item.NumberOfTransferStation)
                        // console.log(this.roadAta,this.roadList);
                    })
                    this.functionEchart()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 47.5rem !important;
    margin-bottom: 1.9rem;
}

.flex {
    display: flex;
    justify-content: flex-end;
}

.box_dl {
    margin-left: 1.5rem;
    margin-top: 1rem;
    width: 6rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    background: #1F4987;
    color: #fff;
    font-size: 1.4rem;
    opacity: 1;
    border-radius: 1rem 1rem 1rem 1rem;
    border: 1px solid #00D6FB;
}

.border {
    opacity: 0.6 !important;
}

.box_chart {
    width: 45rem;
    height: 40rem;
}
</style>